<template>
  <div>
    <div>
      <el-form :model="searchDTO" inline>
        <el-form-item>
          <el-select
              v-model="searchDTO.bucketName"
              placeholder="选择桶">
            <el-option
                v-for="item in buckets"
                :key="item"
                :label="item"
                :value="item"/>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-form-item>
            <el-select
                v-model="searchDTO.folder"
                placeholder="选择文件夹" disabled>
              <el-option key="1" label="所有" value="all"/>
              <el-option
                  v-for="item in buckets"
                  :key="item"
                  :label="item"
                  :value="item"/>
            </el-select>
          </el-form-item>
        </el-form-item>
        <el-form-item>
          <el-select v-model="searchDTO.fileType" placeholder="文件类型">
            <el-option key="1" label="图片" value="image"/>
            <el-option key="2" label="视频" value="video"/>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" :icon="Search" @click="seeInfo">搜索</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="primary">新增桶</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div>
      <el-table :data="files.list" height="90vh" style="width: 100%">
        <el-table-column label="预览" width="100">
          <template #default="item">
            <div style="display: flex; align-items: center">
              <el-image :src="$imgBaseUrl+item.row.id" class="icon_class"/>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="id" label="编号" width="100"/>
        <el-table-column prop="fileName" label="名称" width="100"/>
        <el-table-column prop="filePath" label="路径" width="100"/>
        <el-table-column prop="fileType" label="类型" width="100"/>
        <el-table-column prop="fileSize" label="文件大小" width="100"/>
        <el-table-column prop="uploadTime" label="上传时间" width="100"/>
        <el-table-column fixed="right" label="操作" width="100">
          <template #default="item">
            <div style="display: flex; align-items: center">
              <el-space wrap>
                <el-text class="mx-1" type="danger" @click="deleteFile(item.row)">删除文件</el-text>
              </el-space>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination background layout="prev, pager, next" :total="searchDTO.totals"
                     v-model:current-page="searchDTO.pageNum"
                     v-model:page-size="searchDTO.pageSize"/>
    </div>

    <div>
      <!--                                    弹出框                                         -->
    </div>
  </div>
</template>
<script setup>
/*模块引入*/
import {ref, reactive, onMounted, watch} from 'vue'
import {Search} from '@element-plus/icons-vue'
import {getBucket, getFilesFromBucket, delFileByIds} from '@/api/home/file'

let searchDTO = reactive({
  pageSize: 10,
  pageNum: 1,
  totals: Number,
  bucketName: '',
  fileType:'',
  folder:''
})
let buckets = ref()
let files = reactive({
  list: []
})
let delIds = ref([])
/*加载初始化*/
onMounted(() => {
  getbuckets()
})

/*方法区*/
function getbuckets() {
  /*获取桶名称*/
  getBucket().then(res => {
    buckets.value = res.data
  })
}

/*点击桶查看该桶下的文件*/
async function seeInfo(row, column, event) {
  /*查看桶内的文件信息*/
  let res = await getFilesFromBucket(searchDTO)
  files.list = res.data.records
  searchDTO.totals = res.data.total - 0
}

function deleteFile(info) {
  /*删除文件*/
  delIds.value.push(info.id)
  delFileByIds(delIds.value).finally(() => {
    seeInfo()
  })
}

watch([() => searchDTO.pageNum, () => searchDTO.pageSize], () => {
  seeInfo()
})
</script>

<style scoped>
.icon_class {
  width: 40px;
  height: 50px;
}
</style>
